<template>
  <div>
    <div id="area-production"></div>
    <!--    <el-button @click="start">比赛开始</el-button>-->
    <!--    <el-button @click="stop">比赛暂停</el-button>-->
  </div>
</template>

<script>
import axios from "axios";
import { Area } from "@antv/g2plot";
export default {
  name: "Area",
  data() {
    return {
      chart: "",
      my_cnt: 3,
      winRateData: [],
      interval: "",
    };
  },
  methods: {
    //获取胜率数据
    async getWinRate() {
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/predicts`
      );
      this.winRateData = data;
    },
    sendData(time) {
      if (timer) {
        clearTimeout(timer);
      }
      if (this.my_cnt === this.rateData.length + 3) {
        return;
      }

      const timer = setTimeout(() => {
        const oldTime = this.rateData[this.my_cnt - 1]["time"];
        this.chart.changeData(this.rateData.slice(0, this.my_cnt));
        const newTime = this.rateData[this.my_cnt - 1]["nextTime"];
        const intervalTime = newTime - oldTime;
        this.sendData(intervalTime);
        this.my_cnt += 3;
      }, time);
    },
    start() {
      const originalData = this.winRateData;
      let cnt = 3;
      this.interval = setInterval(() => {
        if (cnt === originalData.length) {
          clearInterval(this.interval);
        } else {
          cnt += 3;
          this.chart.changeData(originalData.slice(0, cnt));
          // this.chart.changeData(originalData.slice(cnt, cnt+3));
          console.log(originalData.slice(0, cnt));
        }
      }, 1000);
    },
    stop() {
      clearInterval(this.interval);
    },
  },
  computed: {
    cutData() {
      return this.winRateData.filter((item) => {
        return item.time < 300;
      });
    },
  },
  mounted() {
    const data = this.cutData;
    console.log("mounted");
    this.chart = new Area("area-production", {
      data,
      xField: "time",
      yField: "value",
      seriesField: "type",
      meta: {
        value: {
          formatter: (v) => {
            return v + "%";
          },
        },
        type: {
          formatter: (v) => {
            if (v === "win") {
              return "胜";
            }
            if (v === "draw") {
              return "平";
            }
            if (v === "lose") {
              return "负";
            }
          },
        },
      },
      // smooth:true,
      //更改图例的marker的颜色，透明度需要去legend里面修改
      color: ["#e1b12c", "#dcdde1", "#c23616"],
      xAxis: {
        min: 0,
        tickInterval: 200,
        max: 1000,
        // animate:false,
        // animate: {
        //   // 配置图表第一次加载时的入场动画
        //   update: {
        //     animation: 'grow-in-x', // 动画效果
        //     duration: 100,  // 动画执行时间
        //   },
        // },
      },
      yAxis: {
        grid: null,
        min: 0,
        max: 100,
        // animate:false,
        // animate: {
        //   // 配置图表第一次加载时的入场动画
        //   update: {
        //     animation: 'grow-in-x', // 动画效果
        //     duration: 100,  // 动画执行时间
        //   },
        // },
      },
      //面积的背景颜色
      areaStyle: ({ type }) => {
        if (type === "win") {
          return {
            fill: "#e1b12c",
            fillOpacity: 1,
          };
        }
        if (type === "draw") {
          return {
            fill: "#dcdde1",

            fillOpacity: 1,
          };
        }
        if (type === "lose") {
          return {
            fill: "#c23616",
            fillOpacity: 1,
          };
        }
      },
      //面积图上的折线配置
      line: {
        color: ({ type }) => {
          if (type === "win") {
            return "#e1b12c";
          }
          if (type === "draw") {
            return "#dcdde1";
          }
          if (type === "lose") {
            return "#c23616";
          }
        },
      },
      // legend:{
      //   marker:{
      //     style:{
      //       fillOpacity:1
      //     }
      //   }
      // },
      legend: false,
      animate: false,
    });
    this.chart.render();
  },
  created() {
    this.getWinRate();
  },
  beforeDestroy() {
    clearInterval(this.interval);
    this.interval = null;
  },
};
</script>

<style scoped>
#area-production {
  width: 100%;
  height: 100%;
  /*margin: auto;*/
  /*background-color: red;*/
}
</style>
